<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ROC监控后台管理</title>
    <link rel="stylesheet" href="element-ui.css">
    <style>
        html,body,.el-container{
            margin: 0;
            height:100%;
        }
        .el-header{
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            padding: 0px;
        }
        .el-main {
            color: #333;
            padding: 0px;
        }
        .el-menu {
            background-color: rgb(84, 92, 100);
            padding-left: 60px  ;
        }
        .el-menu--horizontal>.el-menu-item{
            color: white;
        }
        .el-menu--horizontal>.el-menu-item.is-active {
            border-bottom: 2px solid rgb(255, 208, 75);
            color: rgb(255, 208, 75);
        }
    </style>
</head>
<body>
<el-container id="main">
    <el-header>
        <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
            <el-menu-item :index="menu.src" v-for="(menu,index) in menus">{{menu.title}}</el-menu-item>
        </el-menu>
    </el-header>
    <el-main>
        <iframe width="100%" :height="iframehHeight" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" v-bind:src="activeIndex"></iframe>
    </el-main>
</el-container>
<script src="./vue.js"></script>
<script src="./element-ui.js"></script>
<script src="./axios.js"></script>
<script>
    var main = new Vue({
        el: '#main',
        data: {
            menus: [
                {title: "客户端管理", src:"./monitor.html"},
                {title: "基础配置管理", src:"./properties.html"},
                {title: "数据接收日志", src:"./datareceive.html"}
            ],
            activeIndex: "./monitor.html",
            iframehHeight: '500px'
        },
        mounted: function () {
            this.iframehHeight = (document.querySelector('.el-main').offsetHeight-10)+'px';
        },
        methods: {
            handleSelect(url){
                this.activeIndex = url;
            }
        }

    });
</script>
</body>
</html>